<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
	<style>
		/* 必需 */
		.expand-transition {
		 transition: all .3s ease;
		 height: 30px;
		 padding: 10px;
		 background-color: #eee;
		 overflow: hidden;
		}
		 
		/* .expand-enter 定义进入的开始状态 */
		/* .expand-leave 定义离开的结束状态 */
		.expand-enter, .expand-leave {
		 height: 0;
		 padding: 0 10px;
		 opacity: 0;
		}
	</style>
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	<div v-if="show" transition="expand" :transition:'transitionName'>{{hello}}</div>
</div>
<script>
Vue.transition('expand', {
 
	 beforeEnter: function (el) {
	 	el.textContent = 'beforeEnter'
	 },
	 enter: function (el) {
	 	el.textContent = 'enter'
	 },
	 afterEnter: function (el) {
	 	el.textContent = 'afterEnter'
	 },
	 enterCancelled: function (el) {
	 // handle cancellation
	 },
	 
	 beforeLeave: function (el) {
	 	el.textContent = 'beforeLeave'
	 },
	 leave: function (el) {
	 	el.textContent = 'leave'
	 },
	 afterLeave: function (el) {
	 	el.textContent = 'afterLeave'
	 },
	 leaveCancelled: function (el) {
	 // handle cancellation
	 }
})
var vm = new Vue({
 el: '#root',
 data: {
 	hello : 'Hello',
 	show: false,
 	transitionName: 'fade'
 }
})
</script>	
</body>
</html>